<template>
  <div class="exchange-total">
    <!--顶部-->
    <img src="../common/images/top_logo.png" class="exchange-top">
    <div class="credit-list">
      <div class="list">
        <img src="../common/images/exchange_gold.png" class="list-bag">
        <div class="list-content">
          <div class="list-content-top">
            <h3>大圣</h3>
            <p>玩具——乐恩T系列</p>
            <p>智慧片——智慧家庭</p>
          </div>
          <div class="list-content-bottom">价值¥856元【限量5份】
            <img src="../common/images/usable.png" @click="get(1)">
            <!--<img src="../common/images/disable.png" alt="">-->
          </div>
        </div>
      </div>
      <div class="list">
        <img src="../common/images/exchange_gold.png" class="list-bag">
        <div class="list-content">
          <div class="list-content-top">
            <h3>艺隆</h3>
            <p>小猪佩奇玩具组合</p>
          </div>
          <div class="list-content-bottom">价值¥537元【限量5份】
            <img src="../common/images/usable.png" @click="get(2)">
            <!--<img src="../common/images/disable.png" alt="">-->
          </div>
        </div>
      </div>
      <div class="list">
        <img src="../common/images/exchange_gold.png" class="list-bag">
        <div class="list-content">
          <div class="list-content-top">
            <h3>POPMART</h3>
            <p>盲盒*12</p>
          </div>
          <div class="list-content-bottom">价值¥780元【限量10份】
            <img src="../common/images/usable.png" @click="get(3)">
            <!--<img src="../common/images/disable.png" alt="">-->
          </div>
        </div>
      </div>
      <div class="list">
        <img src="../common/images/exchange_gold.png" class="list-bag">
        <div class="list-content">
          <div class="list-content-top">
            <h3>食品</h3>
            <p>年货套装</p>
            <p>酱油肉、无骨腊鸡腿</p>
            <p>火腿块、皇上皇如一腊肠</p>
          </div>
          <div class="list-content-bottom">
            价值¥272元【限量20份】
            <img src="../common/images/usable.png" @click="get(4)">
            <!--<img src="../common/images/disable.png" alt="">-->
          </div>
        </div>
      </div>
      <div class="list">
        <img src="../common/images/exchange_gold.png" class="list-bag">
        <div class="list-content">
          <div class="list-content-top">
            <h3>食品</h3>
            <p>美心 原味鸡蛋卷</p>
            <p>美心 礼盒装香脆甜心酥</p>
          </div>
          <div class="list-content-bottom">
            价值¥297元【限量50份】
            <img src="../common/images/usable.png" @click="get(5)">
            <!--<img src="../common/images/disable.png" alt="">-->
          </div>
        </div>
      </div>
      <div class="list">
        <img src="../common/images/exchange_gold.png" class="list-bag">
        <div class="list-content">
          <div class="list-content-top">
            <h3>食品</h3>
            <p>白色恋人 白巧克力夹心饼干</p>
            <p>CALBEE  薯条三兄弟 (咸味)</p>
            <p>CALBEE  薯条三兄弟 (酱油味)</p>
          </div>
          <div class="list-content-bottom">
            价值¥218元【限量25份】
            <img src="../common/images/usable.png" @click="get(6)">
            <!--<img src="../common/images/disable.png" alt="">-->
          </div>
        </div>
      </div>
      <div class="list">
        <img src="../common/images/exchange_gold.png" class="list-bag">
        <div class="list-content">
          <div class="list-content-top">
            <h3>食品</h3>
            <p>奇华  贺年版鸡蛋卷</p>
            <p>奇华  什锦糕饼礼盒</p>
            <p>奇华  椰汁糖年糕</p>
          </div>
          <div class="list-content-bottom">
            价值¥340元【限量90份】
            <img src="../common/images/usable.png" @click="get(7)">
            <!--<img src="../common/images/disable.png" alt="">-->
          </div>
        </div>
      </div>
      <div class="list exchange-strong">
        <img src="../common/images/exchange_strong.png" class="list-bag">
        <div class="list-content">
          <div class="list-content-top">
            <p>虎牌  焖烧杯</p>
            <p>虎牌  柠檬酸</p>
            <p>泰普尔 睦风枕</p>
          </div>
          <div class="list-content-bottom">
            价值¥1568元【限量5份】
            <img src="../common/images/usable_strong.png" @click="get(8)">
            <!--<img src="../common/images/disable.png" alt="">-->
          </div>
        </div>
      </div>
    </div>
    <!--底部-->
    <img src="../common/images/bottom.png" class="exchange-bottom">
    <!--弹窗-->
    <pop-up @cancel="cancel" :popShow="popShow" :popText="popText"></pop-up>
  </div>
</template>

<script>
  import popUp from '../components/pop-up'
  export default {
    components: {
      popUp
    },
    data() {
      return {
        popShow: false, // 弹出确认框开关
        // popText: '活动已结束 <br>感谢参与，祝您新年快乐！' // 弹出框文案
        // popText: '抱歉，您的积分余额不足！' // 弹出框文案
        popText: '确认扣除19000积分换购此福袋?' // 弹出框文案
      }
    },
    methods: {
      // 积分兑换
      get(num) {
        alert(`兑换页面19000-29000积分${num}`)
      },
      // 取消
      cancel() {
        this.popShow = false
      }
    }
  }
</script>

<style scoped lang="stylus">
  @import '../common/stylus/base.styl'
  @import '../common/stylus/credit.styl'
  .exchange-strong
    border vw(3) dashed #ff6600
    width vw(580)
    height vw(258)
    margin-top vw(80)!important
    .list-content
      background-image url('../common/images/exchange_layer1.png')!important
      color #f1ec55!important
</style>
